<template>
	<view class="root-lay">
		<view class="head-lay flex-h">
			<view class="head-title">{{ headTitle }}</view>

			<view class="head-right flex-h" v-show="isOptEnable">
				<view class="head-tool" @click="onDelClick">{{$t('public.remove')}}</view>
				<view class="head-tool">{{$t('visualShow.reportView.wildAccount')}}</view>
			</view>
		</view>
		<view class="content-lay">
			<view class="title">{{$t('visualShow.reportView.wildAccount')}}
				（{{$t('visualShow.reportView.plan')}} 2021-04）</view>

			<view class="info-line flex-h">
				<view class="info-item" style="width: 100%">
					<view class="info-title">{{$t('visualShow.reportView.wrkCls')}}：</view>

					<view class="info-value info-value-long">
						<picker @change="bindWrkClsPickerChange" :value="wrkClsPickerIndex" :range="wrkClsPickerArray"
							range-key="cod_name" :disabled="selectTableData.plan_kbn == 1 || selectTableData.progress == 2 ">
							<view class="info-picker flex-h">
								<view class="info-picker-text">{{
                  wrkClsPickerArray[wrkClsPickerIndex].cod_name.length > 0 ? wrkClsPickerArray[wrkClsPickerIndex].cod_name : ' '
                }}</view>
								<image style="width: 9upx; height: 8upx" src="@/static/imgs/icon_dropdown@2x.png" />
							</view>
						</picker>
					</view>
					<image class="icon-file" src="@/static/imgs/icon_menu_file@2x.png" @click="onShowTypeClick" />
				</view>
			</view>

			<view class="splite-lay" v-if="showType == 0">
				<view class="info-line flex-h">
					<view class="info-item">
						<view class="info-title">{{$t('visualShow.reportView.ispRst')}}：</view>
						<view class="info-value info-value-short" :style="'background-color:' +  ispRstPickerArray[ispRstPickerIndex].cod_abrv.replace('0x', '#' )">
							<picker @change="bindIspRstPickerChange" :value="ispRstPickerIndex"
								:range="ispRstPickerArray" range-key="cod_name"
								:disabled="selectTableData.progress == 2">
								<view class="info-picker flex-h">
									<view class="info-picker-text">{{
				      ispRstPickerArray[ispRstPickerIndex].cod_name
				    }}</view>
									<image style="width: 9upx; height: 8upx" src="@/static/imgs/icon_dropdown@2x.png" />
								</view>
							</picker>
						</view>
					</view>
					<view class="info-item">
						<view class="info-title-oth">{{$t('visualShow.reportView.dpsType')}}：</view>
						<view class="info-value info-value-short">
							<picker @change="bindDpsTypePickerChange" :value="dpsTypePickerIndex"
								:range="dpsTypePickerArray" range-key="cod_name"
								:disabled="selectTableData.progress == 2">
								<view class="info-picker flex-h">
									<view class="info-picker-text">{{
				      dpsTypePickerArray[dpsTypePickerIndex].cod_name
				    }}</view>
									<image style="width: 9upx; height: 8upx" src="@/static/imgs/icon_dropdown@2x.png" />
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="info-line flex-v" style="width: 100%">
					<textarea class="input-str" placeholder-style="color:#7f7f7f" placeholder="请输入检查结果"
						v-model="inputSummary" 
						:disabled="selectTableData.progress == 2"/>
				</view>

				<view class="info-line flex-h" style="width: 100%;justify-content: space-between;">
					<button class="info-btn" style="margin: 0;" @click="onOverOrReleaseClick">
						{{selectTableData.progress == 2 ? $t("visualShow.reportView.checkBtnToRelease")
							: $t("visualShow.reportView.checkBtnToOver")}}
					</button>
					<view class="info-title" style="font-weight: 500;color:#231DF7">
						{{$t(`visualShow.reportView.checkResultStr[${selectTableData.progress}]`)}}
					</view>
				</view>
			</view>

			<view class="splite-lay" v-if="showType == 1">
				<view>file</view>
			</view>

		</view>

		<view class="bottom-lay flex-h">
			<view class="btn" @click="onCancelClick">Cancel</view>
			<view class="btn" style="color: #1890ff; margin-left: 1upx" @click="onConfirmClick">OK</view>
		</view>
	</view>
</template>

<script>
	import {
		requireAllWrkClsList
	} from "@/localService/wrkClsService.js";

	import {
		requireCodeIspRstData,
		requireCodeDpsTypeData
	} from "@/localService/visualCheckParamsService.js";

	import {
		updateVisualItemDataInfos,
		requireVisualDataByDmgCode
	} from "@/localService/visualService.js";

	import vTable from "@/components/no-bad-table/table.vue";
	import selectData from "@/common/thick_show_data.js";
	export default {
		components: {
			vTable,
		},
		data() {
			let _self = this;
			return {
				headTitle: _self.$t("visualShow.reportView.reportTitle"),
				showType: 0, // 0:check  1:file

				isOptEnable: true,
				selectTableItem: null,

				// 列表选中的条目
				selectTableData: {},

				wrkClsPickerIndex: 0,
				wrkClsPickerArray: [{
					cod_name: 'default'
				}],

				ispRstPickerIndex: 0,
				ispRstPickerArray: getApp().globalData.ispRstPickerArray,

				dpsTypePickerIndex: 0,
				dpsTypePickerArray: [{
					cod_name: 'default'
				}],

				inputSummary: '',

			};
		},

		watch: {
			selectTableItem(val) {
				if (this.selectTableItem == null) {
					this.isOptEnable = false;
				} else {
					this.isOptEnable = true;
				}
			},

			showType(val) {
				this.headTitle = (val == 0 ? this.$t("visualShow.reportView.reportTitle") :
					this.$t("visualShow.reportView.checkTitle"));
			},
		},

		mounted() {
			this.selectTableData = getApp().globalData.selectListItemData;

			this.requireVisualDataByDmgCodeApi(this.selectTableData.dmg_code);
			this.requireAllWrkClsListApi();
			this.requireCodeDpsTypeDataApi();
		},

		methods: {
			requireVisualDataByDmgCodeApi(inDmgCode) {
				let _self = this;
				requireVisualDataByDmgCode(inDmgCode).then(e => {
					console.log("requireVisualDataByDmgCodeApi --- re")
					console.log(e)
					_self.selectTableData = e[0];
					_self.initFitDatas();
				})
			},

			requireAllWrkClsListApi() {
				let _self = this;
				requireAllWrkClsList().then(e => {
					console.log("requireAllWrkClsListApi --- re")
					console.log(e)
					_self.wrkClsPickerArray = e;
					_self.initFitDatas();
				})
			},

			requireCodeDpsTypeDataApi() {
				let _self = this;
				requireCodeDpsTypeData().then(e => {
					console.log("requireCodeDpsTypeDataApi --- re")
					console.log(e)
					_self.dpsTypePickerArray = e;
					_self.initFitDatas();
				})
			},

			updateVisualItemDataInfosApi(inObj) {
				let _self = this;
				updateVisualItemDataInfos(inObj, this.selectTableData.dmg_code).then(e => {
					console.log("updateVisualItemDataInfosApi --- re")
					console.log(e)
					_self.requireVisualDataByDmgCodeApi(_self.selectTableData.dmg_code);
				})
			},

			initFitDatas() {
				let _self = this;
				_self.dpsTypePickerIndex = _self.dpsTypePickerArray.findIndex((item, index) => {
					return item.code == _self.selectTableData.dps_type;
				});

				_self.ispRstPickerIndex = _self.ispRstPickerArray.findIndex((item, index) => {
					return item.code == _self.selectTableData.isp_rst_type;
				});

				_self.wrkClsPickerIndex = _self.wrkClsPickerArray.findIndex((item, index) => {
					return item.code == _self.selectTableData.wrk_cls_code;
				});

				this.inputSummary = this.selectTableData.summary;
			},

			onSelectionChange(e) {
				if (e.new.item != null) this.selectTableItem = e.new.item;
				else this.selectTableItem = null;
			},

			onShowTypeClick() {
				this.showType = this.showType == 0 ? 1 : 0;
			},

			onCancelClick() {
				this.$emit("closePopup");
			},

			onConfirmClick() {
				let _self = this;
				if (this.wrkClsPickerIndex == 0) {
					uni.showToast({
						title: _self.$t("warnning.selectTip") + _self.$t("visualShow.reportView.wrkCls"),
						icon: "none",
					});
					return;
				}

				let temp = {};
				temp.wrk_cls_code = this.wrkClsPickerArray[this.wrkClsPickerIndex].code;
				temp.isp_rst_type = this.ispRstPickerArray[this.ispRstPickerIndex].code;
				temp.dps_type = this.dpsTypePickerArray[this.dpsTypePickerIndex].code;
				temp.summary = this.inputSummary;

				if (this.selectTableData.progress == 0) {
					temp.progress = 1;
				}

				this.updateVisualItemDataInfosApi(temp);
			},

			onDelClick() {
				let _self = this;

				let temp = {};
				temp.wrk_cls_code = this.wrkClsPickerArray[0].code;
				temp.isp_rst_type = this.ispRstPickerArray[0].code;
				temp.dps_type = this.dpsTypePickerArray[0].code;
				temp.summary = "";
				temp.progress = 0;

				this.updateVisualItemDataInfosApi(temp);
			},

			onOverOrReleaseClick() {
				let _self = this;
				// to over
				let temp = {};
				if (this.selectTableData.progress == 0 || this.selectTableData.progress == 1) {
					if (this.wrkClsPickerIndex == 0) {
						uni.showToast({
							title: _self.$t("warnning.selectTip") + _self.$t("visualShow.reportView.wrkCls"),
							icon: "none",
						});
						return;
					}

					temp.wrk_cls_code = this.wrkClsPickerArray[this.wrkClsPickerIndex].code;
					temp.isp_rst_type = this.ispRstPickerArray[this.ispRstPickerIndex].code;
					temp.dps_type = this.dpsTypePickerArray[this.dpsTypePickerIndex].code;
					temp.summary = this.inputSummary;
					temp.progress = 2;
				} else { // to release
					temp.progress = 1;
				}
				
				this.updateVisualItemDataInfosApi(temp);
			},

			bindWrkClsPickerChange(e) {
				this.wrkClsPickerIndex = e.detail.value;
			},

			bindIspRstPickerChange(e) {
				this.ispRstPickerIndex = e.detail.value;
			},

			bindDpsTypePickerChange(e) {
				this.dpsTypePickerIndex = e.detail.value;
			}
		},
	};
</script>

<style scoped lang="scss">
	.root-lay {
		padding-top: var(--status-bar-height);
	}

	.bottom-lay {
		width: 100%;
		position: fixed;
		bottom: 0upx;
		align-items: center;
		border-top: 1upx solid rgba(0, 0, 0, 0.1);
		background: #ffffff;
		// padding: 1upx;

		.btn {
			width: 50%;
			line-height: 34upx;
			background-color: #fff;
			// padding: 10upx;
			font-weight: 500;
			color: #000000;
			font-size: 13upx;
			text-align: center;
		}

		.btn:first-child {
			border-right: 1upx solid rgba(0, 0, 0, 0.1);
		}
	}

	.head-lay {
		height: 35upx;
		position: relative;
		padding: 5upx;

		.head-title {
			margin: 0 auto;
			font-size: 20upx;
			font-weight: bold;
			color: #333333;
		}

		// .operation-btns {
		// 	line-height: 34upx;
		// 	position: absolute;
		// 	right: 9upx;
		// 	display: flex;

		// 	view {
		// 		font-size: 11upx;
		// 		font-family: PingFangSC-Regular, PingFang SC;
		// 		font-weight: 400;
		// 		color: #333333;
		// 		line-height: 34upx;
		// 	}

		// 	.del {
		// 		margin-right: 19upx;
		// 	}
		// }

		.head-right {
			position: absolute;
			right: 0;
			line-height: 34upx;
			align-items: center;

			.head-tool {
				font-size: 18upx;
				color: #333333;
				margin-right: 10upx;
			}
		}
	}

	.content-lay {
		position: relative;
		height: calc(100% - 68upx);
		overflow-y: auto;
		width: 100%;

		border: 1px solid #E8E8E8;
		padding: 15upx;
		box-sizing: border-box;

		.title {
			font-size: 14px;
			color: #333333;
		}
	}



	.info-line {
		align-items: center;
		width: 100%;
		margin-top: 9upx;

		.info-item {
			display: flex;
			align-items: center;
		}

		.info-title {
			font-size: 14px;
			color: #1f2329;
			width: 70rpx;
		}

		.info-title-oth {
			font-size: 11upx;
			color: #1f2329;
			margin-left: 10upx;
		}

		.info-value {
			height: 25upx;
			border-radius: 1upx;
			border: 1px solid #cfd3d5;
			padding: 0 9upx;
			font-size: 14px;
			box-sizing: border-box;
			line-height: 25upx;
		}

		.info-value-long {
			width: 356upx;
			background: #f6f6f6;
			color: #999999;
		}

		.info-value-short {
			width: 157upx;
			// background: #c3fcff;
			color: #333333;
		}

		.info-picker {
			height: 23px;
			align-items: center;

			.info-picker-text {
				width: 100%;
				height: 100%;
				font-size: 14px;
			}
		}

		.icon-file {
			width: 25rpx;
			height: 25rpx;
			margin-left: 9upx;
		}

		.input-str {
			width: 100%;
			height: 157upx;
			background: #ffffff;
			border: 1upx solid #dee0e3;
			padding: 11upx 9upx;
			box-sizing: border-box;
			font-size: 14px;
			color: #333333;
		}


		.info-btn {
			background: #f6f6f6;
			border-radius: 2px;
			border: 1px solid #dee0e3;
			// padding: 10upx;
		}
	}

	.draw-area {
		padding: 10upx;
		border: 1px solid #cfd3d5;

		.draw-img {
			width: 100%;
			height: 30vh;
		}
	}
</style>
